<template>
  <!-- <div class="g-cur">
    <div class="wp">
      <NuxtLink to="/" class="a">个人中心</NuxtLink><span> / </span
      ><NuxtLink to="/" class="a">我的资产</NuxtLink><span> / </span>
      <span class="s">资产详情</span>
    </div>
  </div> -->
  <div class="g-rowb1">
    <div class="wp1630">
      <!--  <div class="g-bookbox">
        <div class="left">
          <img src="/images/b-i1.png" alt="" class="icon" />
          <div class="pic">
            <img src="/images/lg-bg.png" alt="" />
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="tit">汉字与中华文化十讲</div>

            <a-popover placement="bottomLeft">
              <template #content>
                <div class="gshare-box">
                  <div class="line">
                    <div class="icn">
                      <svg
                        t="1722502567756"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="4253"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M868.78260513 350.93851167c-4.19752479 316.58112364-206.64378348 533.42289687-508.84923077 547.04005471-124.62575954 5.70639316-214.91280228-34.551102-293.48715213-84.46745527 92.10982108 14.70125585 206.32520569-22.11723305 267.41045242-74.40833277-90.28704274-8.78247749-143.74276011-54.7393641-168.7552-128.69725356 26.08953618 4.51026781 53.57474644 3.31414245 78.36079771-1.93480569-81.47305755-27.27282508-139.65259487-77.62795213-142.6586621-183.14254588 22.8629151 10.40920798 46.6967339 20.19409687 78.36079772 22.12306782-60.97321937-34.68180056-106.05956011-161.46291966-54.42078633-245.29788718 90.49359316 99.18854928 199.34683533 180.12947692 378.08647293 191.07898346-44.87512251-191.83050029 209.33127293-295.85489687 315.7222473-166.92541994 44.97431338-8.70079088 81.58158405-25.7639567 116.79551453-44.33599088-14.49353846 44.54837607-42.40585299 75.68030997-76.43065983 100.58539031 37.3506188-5.04239772 70.41152364-14.16912593 98.65525243-28.12469971-17.51944388 36.39255157-55.82929687 69.02751909-88.78984388 96.50689458z"
                          fill="currentColor"
                          p-id="4254"
                        ></path>
                      </svg>
                    </div>
                    <div class="p">分享到Twitter</div>
                  </div>
                  <div class="line">
                    <div class="icn">
                      <svg
                        t="1722502622673"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="5308"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M862.51879883 439.40783691c-69.21386719 0-136.53259278-22.49450684-191.90368653-64.1052246v290.28625488c0 148.23303223-114.20288086 268.28613281-255.10253905 268.28613281S160.41003418 813.82189942 160.41003418 665.58886719c0-148.23303223 114.20288086-268.28613281 255.10253907-268.28613281 14.08996583 0 27.76794434 1.23596192 41.116333 3.54309081v153.75366211c-12.77160645-5.02624512-26.3671875-7.58056641-40.04516602-7.5805664-62.8692627 0-113.87329102 53.55834961-113.87329101 119.72351074 0 66.08276367 51.00402833 119.72351075 113.87329101 119.72351075 62.78686523 0 113.79089356-53.64074708 113.79089356-119.72351075V90.125H672.67504883c0 110.82458497 85.446167 200.63781739 190.83251953 200.63781739v148.56262206l-0.98876953 0.08239747"
                          fill="currentColor"
                          p-id="5309"
                        ></path>
                      </svg>
                    </div>
                    <div class="p">分享到Tik Tok</div>
                  </div>
                </div>
              </template>

              <div class="share">
                <svg
                  t="1722397967169"
                  class="svg"
                  viewBox="0 0 1252 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5977"
                  width="64"
                  height="64"
                >
                  <path
                    d="M789.325694 92.701516L1164.112805 483.412814c19.905234 20.758315 24.739362 31.279653-2.559244 59.715701L788.472612 936.114697V767.773294a71.09012 71.09012 0 0 0-71.09012-71.09012h-39.810467c-125.971692 0-424.550195 23.88628-597.157006 210.711115 32.132734-183.412509 120.568843-351.185192 252.512106-457.251651a615.640437 615.640437 0 0 1 356.019319-126.824773l32.417095-1.706163a71.09012 71.09012 0 0 0 67.109073-71.37448V92.701516M773.970228 0c-28.436048 0-56.872096 22.748838-56.872096 69.952678V250.237222l-32.132734 1.706162a682.46515 682.46515 0 0 0-398.104671 142.18024C142.689964 511.848862 27.239609 708.626314 0.509724 961.991501A54.881572 54.881572 0 0 0 46.860483 1023.697725a22.748838 22.748838 0 0 0 7.393372 0 48.056921 48.056921 0 0 0 43.507153-25.308083C236.244562 799.337307 532.26382 767.773294 677.572025 767.773294h39.810467v193.080765A59.715701 59.715701 0 0 0 776.529472 1023.697725a65.11855 65.11855 0 0 0 46.350758-20.758315l389.858217-412.038334c50.047444-52.037968 52.606689-106.066459 2.559244-158.104427L815.202497 17.91471A56.872096 56.872096 0 0 0 773.970228 0z"
                    p-id="5978"
                  ></path>
                </svg>
              </div>
            </a-popover>
          </div>
          <div class="user">
            <div class="img"></div>
            <div class="t">郭玉增</div>
          </div>
          <div class="line"></div>
          <div class="infobox">
            <div class="gp">
              <div class="s">作品ID：</div>
              <div class="pp">
                <div class="tt">
                  0xdde464c0905527ea118bd430fbe8b4b0fb6864d4c16eb26a7df10…
                </div>
              </div>
            </div>
            <div class="gp">
              <div class="s">区块链标准：</div>
              <div class="pp">
                <div class="tt">DOB</div>
              </div>
            </div>
            <div class="gp">
              <div class="s">哈希地址：</div>
              <div class="pp">
                <div class="tt">
                  0xdde464c0905527ea118bd430fbe8b4b0fb6864d4c16eb26a7df10…
                </div>
                <div class="copy"><copy-outlined /></div>
              </div>
            </div>
            <div class="gp">
              <div class="s">合约地址：</div>
              <div class="pp">
                <div class="tt">9848920981203232443</div>
              </div>
            </div>
            <div class="gp">
              <div class="s">ISBN编号：</div>
              <div class="pp">
                <div class="tt">9490-0232323</div>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="infobox">
            <div class="gp">
              <div class="s">购买时间：</div>
              <div class="pp">
                <div class="tt">2024/07/09 11:40:04</div>
              </div>
              <div class="s">购买花费：</div>
              <div class="pp">
                <div class="tt">100USD</div>
              </div>
            </div>
            <div class="gp">
              <div class="s" style="color: #6b6b6b">预估收益：</div>
              <div class="pp sty1" >
                <div class="tt">
                  <div class="nums"><b>15.28</b>USD</div>
                  <a-tooltip placement="top">
                    <template #title>
                      <span>prompt text</span>
                    </template>
                    <question-circle-outlined />
                  </a-tooltip>
                </div>
                
              </div>
            </div>
          </div>
          <div class="gap24"></div>
          <div class="sbtn">立即提现</div>
        </div>
        <div class="c"></div>
      </div> -->
      <div class="bl-bookbox">
        <div class="left">
          <div class="share">
            <div class="itm">
              <img src="/images/d-s1.svg" alt="" />
            </div>
            <div class="itm">
              <img src="/images/d-s2.svg" alt="" />
            </div>
            <div class="itm">
              <img src="/images/d-s3.svg" alt="" />
            </div>
          </div>
          <div class="pic">
            <!-- 金浆果 -->
            <div class="t-icon" v-if="1">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.79 72.92" fill="currentColor"><defs></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M51.44,72.92A26.36,26.36,0,0,1,25.25,49c-.41-4.33.55-8.58,1.65-12.52a18.64,18.64,0,0,0,.66-3.59,15.23,15.23,0,0,0-.89-6.76A16.69,16.69,0,0,0,5.23,16.26c-.49.18-1,.38-1.43.6a16.34,16.34,0,0,0,1,5.68A16.75,16.75,0,0,0,21.42,33.47C21,30.82,19.11,25.52,10.84,23L12,19.33c7.23,2.24,10.48,6.4,11.93,9.49a14.12,14.12,0,0,1,1.41,6.47l-.1,1.5L23.72,37A20.52,20.52,0,0,1,1.27,23.85,20.17,20.17,0,0,1,0,15.58l.06-1L1,14a19.94,19.94,0,0,1,2.92-1.35,20.36,20.36,0,0,1,15.68.64A20.35,20.35,0,0,1,30.23,24.86a19,19,0,0,1,1.12,8.39,22.77,22.77,0,0,1-.79,4.28C29.4,41.69,28.7,45.18,29,48.69A22.53,22.53,0,1,0,49.36,24.16a22.22,22.22,0,0,0-9.49,3.1l-2-3.25A26.33,26.33,0,0,1,71.73,63.39,26.12,26.12,0,0,1,53.91,72.8C53.08,72.88,52.25,72.92,51.44,72.92Z"/><path class="cls-1" d="M35.41,16.57A11.18,11.18,0,0,1,43,0a11.18,11.18,0,0,1-7.56,16.57Z"/><path class="cls-1" d="M51.38,67A20.26,20.26,0,0,1,31.14,46.78a1.59,1.59,0,0,1,3.17,0A17.09,17.09,0,0,0,51.38,63.85a1.59,1.59,0,0,1,0,3.17Z"/></g></g></svg>
            </div>
            <!-- 银奖 -->
            <div class="t-icon" v-if="0" style="background-color: #617583;">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.79 72.92" fill="currentColor"><defs></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M51.44,72.92A26.36,26.36,0,0,1,25.25,49c-.41-4.33.55-8.58,1.65-12.52a18.64,18.64,0,0,0,.66-3.59,15.23,15.23,0,0,0-.89-6.76A16.69,16.69,0,0,0,5.23,16.26c-.49.18-1,.38-1.43.6a16.34,16.34,0,0,0,1,5.68A16.75,16.75,0,0,0,21.42,33.47C21,30.82,19.11,25.52,10.84,23L12,19.33c7.23,2.24,10.48,6.4,11.93,9.49a14.12,14.12,0,0,1,1.41,6.47l-.1,1.5L23.72,37A20.52,20.52,0,0,1,1.27,23.85,20.17,20.17,0,0,1,0,15.58l.06-1L1,14a19.94,19.94,0,0,1,2.92-1.35,20.36,20.36,0,0,1,15.68.64A20.35,20.35,0,0,1,30.23,24.86a19,19,0,0,1,1.12,8.39,22.77,22.77,0,0,1-.79,4.28C29.4,41.69,28.7,45.18,29,48.69A22.53,22.53,0,1,0,49.36,24.16a22.22,22.22,0,0,0-9.49,3.1l-2-3.25A26.33,26.33,0,0,1,71.73,63.39,26.12,26.12,0,0,1,53.91,72.8C53.08,72.88,52.25,72.92,51.44,72.92Z"/><path class="cls-1" d="M35.41,16.57A11.18,11.18,0,0,1,43,0a11.18,11.18,0,0,1-7.56,16.57Z"/><path class="cls-1" d="M51.38,67A20.26,20.26,0,0,1,31.14,46.78a1.59,1.59,0,0,1,3.17,0A17.09,17.09,0,0,0,51.38,63.85a1.59,1.59,0,0,1,0,3.17Z"/></g></g></svg>
            </div>
            <!-- 铜奖 -->
            <div class="t-icon" v-if="0" style="background-color: #88706a;">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.79 72.92" fill="currentColor"><defs></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M51.44,72.92A26.36,26.36,0,0,1,25.25,49c-.41-4.33.55-8.58,1.65-12.52a18.64,18.64,0,0,0,.66-3.59,15.23,15.23,0,0,0-.89-6.76A16.69,16.69,0,0,0,5.23,16.26c-.49.18-1,.38-1.43.6a16.34,16.34,0,0,0,1,5.68A16.75,16.75,0,0,0,21.42,33.47C21,30.82,19.11,25.52,10.84,23L12,19.33c7.23,2.24,10.48,6.4,11.93,9.49a14.12,14.12,0,0,1,1.41,6.47l-.1,1.5L23.72,37A20.52,20.52,0,0,1,1.27,23.85,20.17,20.17,0,0,1,0,15.58l.06-1L1,14a19.94,19.94,0,0,1,2.92-1.35,20.36,20.36,0,0,1,15.68.64A20.35,20.35,0,0,1,30.23,24.86a19,19,0,0,1,1.12,8.39,22.77,22.77,0,0,1-.79,4.28C29.4,41.69,28.7,45.18,29,48.69A22.53,22.53,0,1,0,49.36,24.16a22.22,22.22,0,0,0-9.49,3.1l-2-3.25A26.33,26.33,0,0,1,71.73,63.39,26.12,26.12,0,0,1,53.91,72.8C53.08,72.88,52.25,72.92,51.44,72.92Z"/><path class="cls-1" d="M35.41,16.57A11.18,11.18,0,0,1,43,0a11.18,11.18,0,0,1-7.56,16.57Z"/><path class="cls-1" d="M51.38,67A20.26,20.26,0,0,1,31.14,46.78a1.59,1.59,0,0,1,3.17,0A17.09,17.09,0,0,0,51.38,63.85a1.59,1.59,0,0,1,0,3.17Z"/></g></g></svg>
            </div>
            <!-- 蓝莓 -->
            <div class="t-icon" v-if="0" style="background-color: #000000;">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.79 72.92" fill="currentColor"><defs></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M51.44,72.92A26.36,26.36,0,0,1,25.25,49c-.41-4.33.55-8.58,1.65-12.52a18.64,18.64,0,0,0,.66-3.59,15.23,15.23,0,0,0-.89-6.76A16.69,16.69,0,0,0,5.23,16.26c-.49.18-1,.38-1.43.6a16.34,16.34,0,0,0,1,5.68A16.75,16.75,0,0,0,21.42,33.47C21,30.82,19.11,25.52,10.84,23L12,19.33c7.23,2.24,10.48,6.4,11.93,9.49a14.12,14.12,0,0,1,1.41,6.47l-.1,1.5L23.72,37A20.52,20.52,0,0,1,1.27,23.85,20.17,20.17,0,0,1,0,15.58l.06-1L1,14a19.94,19.94,0,0,1,2.92-1.35,20.36,20.36,0,0,1,15.68.64A20.35,20.35,0,0,1,30.23,24.86a19,19,0,0,1,1.12,8.39,22.77,22.77,0,0,1-.79,4.28C29.4,41.69,28.7,45.18,29,48.69A22.53,22.53,0,1,0,49.36,24.16a22.22,22.22,0,0,0-9.49,3.1l-2-3.25A26.33,26.33,0,0,1,71.73,63.39,26.12,26.12,0,0,1,53.91,72.8C53.08,72.88,52.25,72.92,51.44,72.92Z"/><path class="cls-1" d="M35.41,16.57A11.18,11.18,0,0,1,43,0a11.18,11.18,0,0,1-7.56,16.57Z"/><path class="cls-1" d="M51.38,67A20.26,20.26,0,0,1,31.14,46.78a1.59,1.59,0,0,1,3.17,0A17.09,17.09,0,0,0,51.38,63.85a1.59,1.59,0,0,1,0,3.17Z"/></g></g></svg>
            </div>
            <img class="img" src="/images/xq-p1.png" alt="" />
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="tit">早安，怪物</div>
            <div class="desc">哈利奎恩</div>
          </div>
          <div class="cen">
            <div class="infobox">
              <div class="gp">
                <div class="s">作品ID：</div>
                <div class="pp">
                  <div class="tt">
                    0xdde464c0905527ea118bd430fbe8b4b0fb6864d4c16eb26a7df10…
                  </div>
                </div>
              </div>
              <div class="gp">
                <div class="s">区块链标准：</div>
                <div class="pp">
                  <div class="tt">DOB</div>
                </div>
              </div>
              <div class="gp">
                <div class="s">哈希地址：</div>
                <div class="pp">
                  <div class="tt">
                    0xdde464c0905527ea118bd430fbe8b4b0fb6864d4c16eb26a7df10…
                  </div>
                  <!-- <div class="copy"><copy-outlined /></div> -->
                </div>
              </div>
              <div class="gp">
                <div class="s">合约地址：</div>
                <div class="pp">
                  <div class="tt">9848920981203232443</div>
                </div>
              </div>
              <div class="gp">
                <div class="s">ISBN编号：</div>
                <div class="pp">
                  <div class="tt">9490-0232323</div>
                </div>
              </div>
            </div>
          </div>
          <div class="bot">
            <div class="ll">
              当前版权价格<em class="n">1.25</em><span class="unit">USD</span>
            </div>
            <div class="rr">
              <div class="btn" @click="visible = true">立即购买版权</div>
            </div>
          </div>
        </div>
      </div>
      <div class="g-boxb1">
        <div class="m-h3">发行阶段</div>
        <div class="m-txtb1">
          SilentBerry采用金浆果、银浆果、铜浆果和蓝莓四级的NFT发行模式。用户可购买不同等级的NFT获得作品内容及作品销售分成。（不同等级分成不同）
        </div>

        <ul class="b-list1 sty1">
          <li class="act">
            <div class="con">
              <div class="icon">
                <img src="/images/c-i1.png" alt="" />
              </div>
              <div class="box">
                <div class="top">
                  <div class="tit">金浆果</div>
                  <div class="idx">01</div>
                </div>
                <div class="txt">
                  <div class="line">
                    <div class="s">发行量：</div>
                    <div class="num">000</div>
                  </div>
                  <div class="line">
                    <div class="s">剩余：</div>
                    <div class="num">992</div>
                  </div>
                  <div class="line">
                    <div class="s">单价：</div>
                    <div class="num">160USD</div>
                  </div>
                </div>
               
              </div>
            </div>
            <div class="botbar">
              <div class="bar"></div>
              <div class="p">状态中：发行中</div>
            </div>
          </li>
          <li>
            <div class="con">
              <div class="icon">
                <img src="/images/c-i2.png" alt="" />
              </div>
              <div class="box">
                <div class="top">
                  <div class="tit">银浆果</div>
                  <div class="idx">02</div>
                </div>
                <div class="txt">
                  <div class="line">
                    <div class="s">发行量：</div>
                    <div class="num">000</div>
                  </div>
                  <div class="line">
                    <div class="s">剩余：</div>
                    <div class="num">992</div>
                  </div>
                  <div class="line">
                    <div class="s">单价：</div>
                    <div class="num">160USD</div>
                  </div>
                </div>
               
              </div>
            </div>
            <div class="botbar">
              <div class="bar"></div>
              <div class="p">状态中：发行中</div>
            </div>
          </li>
          <li>
            <div class="con">
              <div class="icon">
                <img src="/images/c-i3.png" alt="" />
              </div>
              <div class="box">
                <div class="top">
                  <div class="tit">铜浆果</div>
                  <div class="idx">03</div>
                </div>
                <div class="txt">
                  <div class="line">
                    <div class="s">发行量：</div>
                    <div class="num">000</div>
                  </div>
                  <div class="line">
                    <div class="s">剩余：</div>
                    <div class="num">992</div>
                  </div>
                  <div class="line">
                    <div class="s">单价：</div>
                    <div class="num">160USD</div>
                  </div>
                </div>
               
              </div>
            </div>
            <div class="botbar">
              <div class="bar"></div>
              <div class="p">状态中：发行中</div>
            </div>
          </li>
          <li class="act">
            <div class="con">
              <div class="icon">
                <img src="/images/c-i4.png" alt="" />
              </div>
              <div class="box">
                <div class="top">
                  <div class="tit">蓝莓</div>
                  <div class="idx">04</div>
                </div>
                <div class="txt">
                  <div class="line">
                    <div class="s">发行量：</div>
                    <div class="num">000</div>
                  </div>
                  <div class="line">
                    <div class="s">剩余：</div>
                    <div class="num">992</div>
                  </div>
                  <div class="line">
                    <div class="s">单价：</div>
                    <div class="num">160USD</div>
                  </div>
                </div>
               
              </div>
            </div>
            <div class="botbar">
              <div class="bar"></div>
              <div class="p">状态中：发行中</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="g-boxb1">
        <div class="m-h3">购买享特权</div>
        <div class="m-txtb1">
          购买后享受采用金浆果、银浆果、铜浆果和蓝莓四级的NFT发行模式。用户可购买不同等级的NFT获得作品内容及作品销售分成
        </div>
        <ul class="ul-listb2">
          <li>
            <div class="con">
              <div class="icon">
                <img src="/images/xq-icn1.png" alt="" />
              </div>
              <div class="txt">
                <div class="tit">持有收益分成</div>
                <div class="desc">获得资产的后续持续收益奖励</div>
              </div>
            </div>
          </li>
          <li>
            <div class="con">
              <div class="icon">
                <img src="/images/xq-icn2.png" alt="" />
              </div>
              <div class="txt">
                <div class="tit">电子书下载</div>
                <div class="desc">购买版权后 可免费下载电子书</div>
              </div>
            </div>
          </li>
          <li>
            <div class="con">
              <div class="icon">
                <img src="/images/xq-icn3.png" alt="" />
              </div>
              <div class="txt">
                <div class="tit">纸质书打印</div>
                <div class="desc">购买版权后 可下单打印纸质书</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="g-boxb1">
        <div class="m-h3">收益记录</div>
        <div class="m-txtb1">
          该销量记录明细为该书籍版权的各个阶段的销售记录
        </div>
        <div class="m-tableb1 sty1">
          <a-table
            :columns="columns"
            :data-source="data"
            :pagination="false"
            :scroll="{ y: 420 }"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'hash'">
                <span class="opts">
                  <a href="#">
                    {{ record.hash }}
                  </a>
                </span>
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <div class="m-tabbox">
        <ul class="ul-tabsb1">
          <li :class="{ act: 0 === currentIndex }" @click="currentIndex = 0">
            <div class="s">书籍详情</div>
          </li>
          <li :class="{ act: 1 === currentIndex }" @click="currentIndex = 1">
            <div class="s">分成说明</div>
          </li>
        </ul>
        <div class="tabboxb1" v-if="currentIndex === 0">
          <div class="m-xqbox1">
            <div class="ll">
              <div class="gp">
                <div class="title">书籍分类</div>
                <div class="txt">
                  <p>人文社科 人物传记</p>
                </div>
              </div>
              <div class="gp">
                <div class="title">书籍语言</div>
                <div class="txt">
                  <p>英语</p>
                </div>
              </div>
              <div class="gp">
                <div class="title">书籍目录</div>
                <div class="txt">
                  <p>
                    第一章 这是目录名称 <br />第二章 这是目录名称 <br />第三章
                    这是目录名称<br />
                    第四章 这是目录名称 <br />第五章 这是目录名称 <br />第六章
                    这是目录名称<br />
                    第七章 这是目录名称<br />
                    第八章 这是目录名称<br />
                  </p>
                </div>
              </div>
            </div>
            <div class="rr">
              <div class="gp">
                <div class="title">书籍作者说明</div>
                <div class="txt sty1">
                  <p>
                    汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。
                  </p>
                </div>
              </div>
              <div class="gp">
                <div class="title">书籍描述</div>
                <div class="txt">
                  <p>
                    汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。在当代，它又以多种创新性方式进入了计算机，从而被赋予了新的生命力，解决了现代化信息处理的问题，迎接了高科技的挑战，使汉语信息和东方文明顺利地传播到全世界。汉字是中华文化的瑰宝，也是世界人民共同的财富。因此，本书的内容，应当是国内外读者都会感兴趣的话题。书籍描述：汉字看似平凡，却有着漫长的不平凡经历。它书写了中华民族的历史，负载了光辉灿烂的中华文化。它具有超越方言分歧的能量，长期承担着数亿人用书面语交流思想的任务，极大地增强了中华民族的凝聚力。它生发了篆刻、书法等独特的东方艺术。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tabboxb1" v-if="currentIndex === 1">
          <div class="m-txtImgb1">
          
          <div class="col-l">
            <div class="pic">
              
              <div class="pic-txt">
                <div class="line">
                  <p>金浆果收益分配：</p>
                  <p>作者 / 平台</p>
                </div>
                <div class="line">
                  <p>银浆果收益分配：</p>
                  <p>金浆果持有者 / 作者</p>
                </div>
                <div class="line">
                  <p>铜浆果收益分配：</p>
                  <p>金浆果持有者 / 银浆果持有者 / 作者 / 平台</p>
                </div>
                <div class="line">
                  <p>蓝莓收益分配：</p>
                  <p>金浆果持有者 / 银浆果持有者 / 铜浆果持有者 / 作者 / 平台</p>
                </div>
              </div>
              <img src="/images/c-img1.png" alt="" />
            </div>
          </div>
        </div>
          <div class="m-xqbox2">
            <div class="gp">
              <div class="desc">
                图书版权的收益权被转化为金浆果、银浆果、铜浆果和蓝莓4种权利，这4种权利将分阶段发行作家和读者在这里共享权利和收益，作者和读者形成了一种前所未有的共生关系：作家提供作品，读者提供流动性，共同助力每部作品创造更多收入。
              </div>
              <ul class="bl-txt1">
                <li>
                  <div class="in">
                    <div class="h3">金浆果的神话</div>
                    <div class="info">
                      金浆果是第一阶段的发行，少量的份额只被那些眼光独到的早期读者捕捉到。金浆果持有者同时拥有一份电子书及一本纸质图书的打印权，金浆果的销售收入在作者和平台之间按比例分配。
                    </div>
                  </div>
                </li>
                <li>
                  <div class="in">
                    <div class="h3">银浆果的扩展</div>
                    <div class="info">
                      当金浆果售罄，银浆果开始销售。价格是金浆果的20%，发行数量是金浆果的二十倍。银浆果是对早期投资者的奖励，也是吸引更多人参与的桥梁。银浆果持有者依然享有电子书及一本纸质图书的打印权，银浆果的销售收入在作者、平台和金浆果持有者之间按比例分配。
                    </div>
                  </div>
                </li>
                <li>
                  <div class="in">
                    <div class="h3">铜浆果的普及</div>
                    <div class="info">
                      银浆果售罄后，铜浆果进入市场。价格是银浆果的20%，发行数量是银浆果的二十倍。更多人能够购买到作品的版权收益权，极大地提高了图书的市场流动性。铜浆果持有者同样获得电子书及一本纸质图书的打印权。售卖铜浆果的销售收入在作者、平台、金浆果和银浆果持有者之间按比例分配。
                    </div>
                  </div>
                </li>
                <li>
                  <div class="in">
                    <div class="h3">蓝莓的魔力</div>
                    <div class="info">
                      蓝莓是无限发行的级别，它象征着知识的普及与共享，让更多的读者能够阅读到作者的作品。持有者同时获得一份电子书及一本纸质图书的打印权。售卖蓝莓NFT的收入在作者、平台、金浆果、银浆果和铜浆果持有者之间按比例分配。
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="gp">
              <div class="desc">
                随着Silentberry四级出版发行模式的展开，越早期的支持者获得的回报越大,
                同时也为更多读者提供了进入的机会。低门槛出版模式只需少数的支持者即可产生收入，作者在图书发行的早期即可获取收益，并随着不断的发行逐渐增加收。
              </div>
              <ul class="bl-txt1 sty1">
                <li>
                  <div class="in">
                    <div class="info">
                      <p>金浆果发行</p>
                      <p>数量：3份（第一阶段版权收益权份数）</p>
                      <p>每份价格：1000美元</p>
                      <p>总计：3000美元</p>
                      <p>收益分配：</p>
                      <p>作者：80%（2400美元）</p>
                      <p>平台：20%（600美元）</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="in">
                    <div class="info">
                      <p>银浆果发行（金浆果售罄后）</p>
                      <p>数量：60份（金浆果的20倍）</p>
                      <p>每份价格：200美元（金浆果价格的20%）</p>
                      <p>总计：12000美元</p>
                      <p>收益分配：</p>
                      <p>金浆果持有者：60%（7200美元）</p>
                      <p>作者：20%（2400美元）</p>
                      <p>平台：20%（2400美元）</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="in">
                    <div class="info">
                      <p>铜浆果发行（银浆果售罄后）</p>
                      <p>数量：1200份（银浆果的20倍）</p>
                      <p>每份价格：40美元（银浆果价格的20%）</p>
                      <p>总计：48000美元</p>
                      <p>收益分配：</p>
                      <p>金浆果持有者：24%（11520美元）</p>
                      <p>银浆果持有者：36%（17280美元）</p>
                      <p>作者：20%（9600美元）</p>
                      <p>平台：20%（9600美元）</p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="in">
                    <div class="info">
                      <p>蓝莓浆果发行（铜浆果售罄后）</p>
                      <p>数量：无限发行</p>
                      <p>每份价格：8美元</p>
                      <p>收益分配（在铜浆果持有者收回成本后）：</p>
                      <p>金浆果持有者：20%</p>
                      <p>银浆果持有者：20%</p>
                      <p>铜浆果持有者：20%</p>
                      <p>作者：20%</p>
                      <p>平台：20%</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 购买弹窗 -->
  <!-- 修改邮箱弹窗 -->
  <a-modal
    v-model:visible="visible"
    centered
    title="版权购买"
    :width="969"
    :footer="null"
  >
    <div class="buy-pop">
      <div class="left">
        <div class="pic">
          <img src="/images/lg-bg.png" alt="" />
        </div>
      </div>
      <div class="right">
        <div class="tit">汉字与中华文化十讲</div>
        <div class="cen">
          <div class="gp">
            <div class="s">购买阶段：</div>
            <div class="rr">
              <div class="p-steps">
                <div
                  class="itm"
                  :class="step == 0 ? 'act' : ''"
                  @click="step = 0"
                >
                  <div class="dot"></div>
                  <div class="txt">
                    <div class="t">金浆果</div>
                    <div class="p">发行的第一阶段</div>
                  </div>
                </div>
                <div
                  class="itm"
                  :class="step == 1 ? 'act' : ''"
                  @click="step = 1"
                >
                  <div class="dot"></div>
                  <div class="txt">
                    <div class="t">蓝莓果</div>
                    <div class="p">发行的第四阶段</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="gp">
            <div class="s">当前价格：</div>
            <div class="rr">
              <div class="nums"><b>1.25</b> USD</div>
            </div>
          </div>
          <div class="gp">
            <div class="s">选择数量：</div>
            <div class="rr">
              <div class="g-numstep">
                <a-input-number
                  v-model:value="selcount"
                  size="small"
                  :min="1"
                  :max="100000"
                ></a-input-number>
              </div>
            </div>
          </div>
          <div class="gp">
            <div class="s">您需支付：</div>
            <div class="rr">
              <div class="price">125 USD</div>
            </div>
          </div>
        </div>
        <div class="bot">
          <div class="btn btn1">立即支付</div>
          <div class="btn">取消</div>
        </div>
      </div>
    </div>
  </a-modal>
  <!-- 购买弹窗end -->
  <!-- 二维码弹窗 -->
  <a-modal
    class="modal-content1"
    v-model:visible="visible_qr"
    centered
    :width="420"
    :footer="null"
  >
    <div class="lg-qr">
      <div class="tit">metamask钱包支付</div>
      <div class="qr">
        <img src="/images/f-qr.png" alt="" />
      </div>
      <div class="p">使用您的移动钱包或手机相机扫描此二维码进行连接。</div>
    </div>
  </a-modal>
  <!-- 二维码弹窗end -->
</template>
<script setup>

import { reactive, ref, onMounted, onBeforeUnmount } from 'vue';
import { CopyOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';

const columns = [{
  title: '日期',
  dataIndex: 'time',
  key: 'time',
  width: 280,
}, {
  title: '版权等级',
  key: 'lev',
  dataIndex: 'lev',
}, {
  title: '数量',
  key: 'count',
  dataIndex: 'count',
}, {
  title: '售价',
  key: 'price',
  dataIndex: 'price',
}, {
  title: '交易哈希',
  key: 'hash',
}];
const data = [{
  key: '1',
  time: '2024/06/10 11:40:19',
  lev: '金浆果',
  count: '100',
  price: '16USD',
  address: '北京市北京市东城区景山街道24号',
  hash: '8a2c7abdac89dq129080',

}, {
  key: '2',
  time: '2024/06/10 11:40:19',
  lev: '金浆果',
  count: '100',
  price: '16USD',
  address: '北京市北京市东城区景山街道24号',
  hash: '8a2c7abdac89dq129080',

}, {
  key: '3',
  time: '2024/06/10 11:40:19',

  lev: '金浆果',
  count: '100',
  price: '16USD',
  address: '北京市北京市东城区景山街道24号',
  hash: '8a2c7abdac89dq129080',

}, {
  key: '4',
  time: '2024/06/10 11:40:19',

  lev: '金浆果',
  count: '100',
  price: '16USD',
  address: '北京市北京市东城区景山街道24号',
  hash: '8a2c7abdac89dq129080',

}, {
  key: '5',
  time: '2024/06/10 11:40:19',

  lev: '金浆果',
  count: '100',
  price: '16USD',
  address: '北京市北京市东城区景山街道24号',
  hash: '8a2c7abdac89dq129080',

}, {
  key: '6',
  time: '2024/06/10 11:40:19',

  lev: '金浆果',
  count: '100',
  price: '16USD',
  address: '北京市北京市东城区景山街道24号',
  hash: '8a2c7abdac89dq129080',

}, {
  key: '7',
  time: '2024/06/10 11:40:19',

  lev: '金浆果',
  count: '100',
  price: '16USD',
  address: '北京市北京市东城区景山街道24号',
  hash: '8a2c7abdac89dq129080',

}, {
  key: '8',
  time: '2024/06/10 11:40:19',

  lev: '金浆果',
  count: '100',
  price: '16USD',
  address: '北京市北京市东城区景山街道24号',
  hash: '8a2c7abdac89dq129080',

}, {
  key: '9',
  time: '2024/06/10 11:40:19',

  lev: '金浆果',
  count: '100',
  price: '16USD',
  address: '北京市北京市东城区景山街道24号',
  hash: '8a2c7abdac89dq129080',

}, {
  key: '10',
  time: '2024/06/10 11:40:19',

  lev: '金浆果',
  count: '100',
  price: '16USD',
  address: '北京市北京市东城区景山街道24号',
  hash: '8a2c7abdac89dq129080',

}];
// 书籍详情 、分成说明切换
const currentIndex = ref(0);

// 购买弹窗
const visible = ref(false);

const step = ref(0);
const selcount = ref(100);

const visible_qr = ref(false);

onMounted(async () => {
  // 给header添加class
  if (document.documentElement.clientWidth > 1199) {
    document?.querySelector('.pagebox').classList.add('page-home');
  }
})
// 页面销毁时需要执行的操作
onBeforeUnmount(() => {
  if (document.documentElement.clientWidth > 1199) {

    document?.querySelector('.pagebox').classList.remove('page-home');
  }
});

</script>

<style>
</style>
